import {ResumeContext} from '../components/MyContext'
import Child1 from '../components/Child1';
import React from 'react';
import Aaa from '../components/aaa'
import Myportals from '../components/myportals';
import {Profiler} from 'react/cjs/react.production.min';

class Parent extends React.Component {
  constructor(props) {
    super(props);
  }
  myRef = React.createRef()
  state = {
    name: '张三',
    val: ''
  }
  toChange = (e) => {
    this.setState({val: e.target.value})
    console.log(this.myRef.current.ref.current.state);
  }

  callback = (id,phase,actualDuration,baseDuration,startTime,commitTime,interactions) => {
    console.log('id',id);
    console.log('phase',phase);
    console.log('actualDuration',actualDuration);
    console.log('baseDuration',baseDuration);
    console.log('startTime',startTime);
    console.log('commitTime',commitTime);
    console.log('interactions',interactions);
  }

  render() {
    return (
      <div>
        <div>
          <h3>This parent component</h3>
          <input type="text" value={this.state.val} onChange={this.toChange}/>
        </div>
        <Profiler id="contextProvider" onRender={this.callback}>
          <ResumeContext.Provider
            value={{
            name: this.state.name,
            id: '9999',
            val: this.state.val
          }}>
            <Child1 ref={this.myRef}></Child1>
          </ResumeContext.Provider>
        </Profiler>

        <h3>高阶组件</h3>
        <Aaa></Aaa>
        {/* <Myportals></Myportals> */}
      </div>
    );
  }
}

export default Parent;